import React, {Component} from 'react'
import axios from 'axios'
import {connect} from 'react-redux'
class Login extends Component {
    state= {
        phone:'',
        password:'',
        password2:''
    }
    goEnter(){
        let {phone ,password,password2}= this.state
        // console.log({phone ,password})
        var truephone=/^[1][3,4,5,7,8][0-9]{9}$/; //手机号正则表达式：
        let truepassword = /^(\w){6,20}$/  //6-20个字母 数字 下划线
        console.log(truephone.test(phone))
        if(truephone.test(phone) && truepassword.test(password)){
            console.log('true')
            if(password === password2){
                this.props.login({phone ,password})
            }else{
                alert('两次密码不一致')
            }
        }else{
            alert('格式不正确')
        } 
    }
    // goEnter(){
    //     console.log(this.state)
    //     axios.post('/login' ,{
    //         phone:this.state.phone,
    //         password:this.state.password
    //     }).then((res) =>{
    //         console.log(res.data)
    //         if(res.data.code===1){
    //             alert('注册成功')
    //         }
    //     })
    // }
    render(){
        return (
            <div className="login-box">
               <div className="logo">
                    <span className="iconfont icon-wangyiyunyinle"></span>
               </div>
               <div className="ipts" >
                    <input placeholder="请输入手机号" id="phone"  style={{color:'black'}}
                    value={this.state.phone} 
                    onChange={(ev) => 
                        this.setState({
                            phone:ev.target.value
                        })                       
                    }></input>
                    <input  placeholder="请输入密码" id="password"  style={{color:'black'}}
                    value={this.state.password} 
                    onChange={(ev) => this.setState({
                        password:ev.target.value
                    })}></input>
                    <input  placeholder="请确认密码" id="password2"  style={{color:'black'}}
                    value={this.state.password2} 
                    onChange={(ev) => this.setState({
                        password2:ev.target.value
                    })}></input>
                    <button onClick={_=>{this.goEnter()}}>注册</button>
               </div>
               <div className="bottom">
                   <div>
                        <span className="iconfont icon-weixin"></span>
                   </div>
                   <div>
                        <span className="iconfont icon-icon363601"></span>
                   </div>
                   <div>
                        <span className="iconfont icon-weibo"></span>
                   </div>
                   <div>
                        <span className="iconfont icon-yi"></span>
                   </div>
               </div>
               <div className="text">
                   <p><input type="checkbox" />同意《用户协议》《隐私政策》《儿童隐私政策》</p>
                   <p>《中国联通认证服务协议》</p>
               </div>
            </div>
        )
    }
}
let mapStateToProps =(state) => {
    return {
        
    }
}
let mapDispatchToProps =(dispatch,props) => {
    return {
        login(obj){
            dispatch(() =>{
                axios.post('/login',obj).then(res =>{
                    if(res.data.code === 1){
                        console.log('注册成功')
                        // console.log(props)
                        props.history.push('/enter')
                    }else{
                        console.log('注册失败')
                    }  
                })
            })
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Login)